<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!--  <link rel="icon" href="">-->
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
    <style>
        body {
            overflow: scroll !important;
        }


		@-webkit-keyframes pulse {
			0% {
				-webkit-transform: scaleX(1);
				transform: scaleX(1)
			}

			50% {
				-webkit-transform: scale3d(1.05,1.05,1.05);
				transform: scale3d(1.05,1.05,1.05)
			}

			to {
				-webkit-transform: scaleX(1);
				transform: scaleX(1)
			}
		}

		@keyframes pulse {
			0% {
				-webkit-transform: scaleX(1);
				transform: scaleX(1)
			}

			50% {
				-webkit-transform: scale3d(1.05,1.05,1.05);
				transform: scale3d(1.05,1.05,1.05)
			}

			to {
				-webkit-transform: scaleX(1);
				transform: scaleX(1);
			}
		}



        .dialog-mask_Z {
            display: none;
        }

        .sliding_box_z_Z {
            display: none;
        }

        .sliding_box_z_Z {
            display: none;
        }

        .dialog__main_Z {
            display: none !important;
        }

        .sliding_ok_Z {
            display: none !important;
        }

        .form-step1, .form-step3 {
            position: absolute;
            left: 18px;
            top: -38px;
            width: 222px;
            pointer-events: none;
        }

        .form-step2 {
            position: absolute;
            right: 0.2rem;
            top: -38px;
            width: 80px;
            pointer-events: none;
        }

        .form-step4 {
            position: absolute;
            right: 0.8rem;
            top: 4.5rem;
            width: 170px;
            pointer-events: none;
        }

        .confirm-step4 {
            position: absolute;
            width: 170px;
            pointer-events: none;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .image-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: auto;
            display: block;
            border-radius: 18px;
        }
		.header-phone-img{
			position: absolute;
			transform: translateX(-50%);
			width: 50%;
		}
		.changeBig {
			-webkit-animation: pulse 1.5s infinite;
			animation: pulse 1.5s infinite
		}		
    </style>
</head>
<body>
<div id="app">
    <div data-toggle="top">
        <img src="./images/header.png" alt="">
    </div>
    <div class="bg-image" data-toggle="inputBG"
         style="background-image: url(./images/bg.png);background-size: 100% 100%;">
        <div class="form">
			<div><img src="images/phone.png" alt="" class="header-phone-img" @click="handlePhone"></div>
			<div style="margin-top: 30px;position:relative;">
				<div class="input-group max" style="position:relative;margin-top:10px">
					<img class="form-step1" src="./images/step01.gif" v-show="step1Visible">
					<input class="input" type="tel" v-model="mobile" pattern="[0-9]*" maxlength="11"
						   placeholder="请输入手机号码" quick="" v-on:input="checkPhone">
				</div>

				<div class="input-group max " style="position:relative;margin-top:20px;">
					<img class="form-step2" src="./images/step02.gif" v-show="step2Visible">
					<img class="form-step3" src="./images/step03.gif" v-show="step3Visible">
					<input v-model="code" class="input" type="tel" pattern="[0-9]*" maxlength="6"
						   placeholder="请输入验证码" v-on:input="checkCode">
					<button style="color: #EF4543;" type="button" v-on:click="getCode">
						<p v-show="!timeVisible">获取验证码</p>
						<p class="sms-wait" v-show="timeVisible">
							<span>{{num}}</span><span>s</span>
						</p>
					</button>
				</div>
				<div style="position: relative;">
					<img class="changeBig" id="handleBtn" src="./images/buy.png" v-on:click="checkCodeVal();">
					<img class="form-step4 hide" src="./images/step04.gif">
				</div>
				<!-- 添加勾选框 -->
				<div class="checkbox-group" style="padding-top: 10px;text-align: center;">
					<input type="checkbox" id="agreement" v-model="agreement" style="display: inline-block; margin-right: 10px;width: auto">
					我已阅读并同意协议<label for="agreement" @click.prevent="showAgreement">《用户隐私协议》</label>
				</div>
			</div>
        </div>
    </div>
	<!-- 模态框 -->
	<div id="agreementModal" class="modal" style="display: none;">
		<div class="modal-content">
			<span class="close" @click="closeModal">&times;</span>
			<pre id="agreementText"></pre>
		</div>
	</div>
    <div class="bg-image" data-toggle="descBg"
         style="background-image: url(./images/bg2.png);padding:100% 8vw 340vw;background-size: 100% 100%;">
        <!--<p>1、订购成功后，权益将下发至订购手机号码所绑定的妙医健康平台会员账户。一般半小时内生效。产品所含权益与定向流量当月有效，费用一次性扣除，自动按月续订，退订后次月失效。产品权益与流量不可赠送，不可共享、不可结转。</p>
        <p>&nbsp;</p>
        <p>2、用户可微信搜索“妙医健康”小程序(首次使用需用订购手机号登录妙医健康账户)，点击【会员】-【权益详情】查看产品权益有效期。</p>
		<p>&nbsp;</p>
        <p>3、妙医健康互联网问诊优享可用于在妙医健康小程序进行线上问诊服务、购买商品时，在符合使用门槛的情况下抵扣使用。</p>
		<p>&nbsp;</p>
        <p>4、妙医健康互联网问诊优享有效期内在妙医健康小程序上使用，逾期视为自动放弃、不退不补。</p>
        <p>5、互联网问诊优享(月卡会员)有效期1个月，到期自动续订。</p>-->			
    </div>
    <div data-toggle="bottom">
        <img src="./images/footer.jpg">
    </div>
    <div class="popup" v-show="confirmVisible">
        <div class="content">
            <div>
                <div><img data-toggle="confirmPic1" src="./images/two.png"></div>
                <div class="confirm">
                    <img data-toggle="confirmPic2" src="./images/bg3.png">
                    <div class="form max">
                        <div class="button-box">
                            <p style="width:46%;"><img data-toggle="confirmLeftCloseBtn" src="./images/btn2.png"
                                                     v-on:click="closeConfirm"></p>
                            <p style="width:46%;position:relative;">
                                <img src="./images/btn3.png" data-toggle="confirmBtn" data-delay="0"
                                     v-on:click="submit()"/>
                            </p>
                            <img class="confirm-step4 hide" src="./images/step04.gif" style="right:0;top:8rem;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="./js/index.js">

</script>


</html>
